<script setup lang="ts">
import { reactive, ref } from 'vue'

const current = ref('1')

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]

const formData = reactive({
    username: '',
    password: '',
})

</script>

<template>
    <!-- 容器 -->
    <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px">
            <!-- 滚动条 -->
            <el-scrollbar>
                <!-- 菜单 vertical  -->
                <el-menu :default-active="current" mode="vertical">
                    <!-- 菜单项 -->
                    <el-menu-item index="1">
                        <!-- 图标 -->
                        <el-icon>
                            <Menu />
                        </el-icon>
                        工作台
                    </el-menu-item>
                    <!-- 菜单编组 -->
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon>
                                <OfficeBuilding />
                            </el-icon>
                            园区管理
                        </template>
                        <!-- 菜单项 -->
                        <el-menu-item index="2-1">楼宇管理</el-menu-item>
                        <el-menu-item index="2-2">企业管理</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="3">
                        <template #title>
                            <el-icon>
                                <Van />
                            </el-icon>
                            行车管理
                        </template>
                        <el-menu-item index="3-1">区域管理</el-menu-item>
                        <el-menu-item index="3-2">月卡管理</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-scrollbar>
        </el-aside>
        <!-- 容器 -->
        <el-container>
            <!-- 头部 -->
            <el-header>
                <!-- 下拉菜单 -->
                <el-dropdown>
                    <span class="el-dropdown-link">
                        标题
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <!-- 菜单插槽 -->
                    <template #dropdown>
                        <!-- 菜单组 -->
                        <el-dropdown-menu>
                            <!-- 菜单项 -->
                            <el-dropdown-item disabled>Action 1</el-dropdown-item>
                            <el-dropdown-item>Action 2</el-dropdown-item>
                            <el-dropdown-item divided>Action 3</el-dropdown-item>
                            <el-dropdown-item disabled>Action 4</el-dropdown-item>
                            <el-dropdown-item divided>Action 5</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <!-- 主体 -->
            <el-main>
                <!-- 表格 -->
                <el-table :data="tableData" stripe>
                    <!-- 表格列 -->
                    <el-table-column prop="date" label="日期"></el-table-column>
                    <el-table-column prop="name" label="名字"></el-table-column>
                    <el-table-column prop="address" label="地址"></el-table-column>
                </el-table>
                <!-- 分割线 -->
                <el-divider></el-divider>
                <el-divider></el-divider>
                <!-- 表单 -->
                <el-form :model="formData">
                    <!-- 表单项 - 设置标题 -->
                    <el-form-item label="帐号">
                        <!-- 输入框 -->
                        <el-input v-model="formData.username" placeholder="请输入帐号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="formData.password" type="password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <!-- 复选框 -->
                        <el-checkbox>记住我</el-checkbox>
                    </el-form-item>
                    <el-form-item>
                        <!-- 按钮 -->
                        <el-button type="primary">登录</el-button>
                        <el-button>重置</el-button>
                    </el-form-item>
                </el-form>

                {{ formData }}
            </el-main>
            <!-- 页脚 -->
            <el-footer>footer</el-footer>
        </el-container>
    </el-container>
</template>
